<template>
    <!-- wxz_wzbagent/pages/popupwindow/popupwindow.wxml -->
    <view :class="'i-modal-mask ' + (visibleClone == 1 ? 'i-modal-mask-show' : '')" @tap.stop.prevent="outClick">
        <view class="centerView">
            <view class="titleText">{{ titleString }}</view>
            <!-- <textarea wx:if="{{contentString}}" class='contentText' style='height: {{contentHeight > 0 && contentHeight <= 700 ? contentHeight:700}}rpx;' value='{{contentString}}' maxlength="-1" disabled="true" fixed="true"></textarea> -->
            <image @tap="openImage" v-if="contentImage" :src="contentImage" :data-src="contentImage" :show-menu-by-longpress="true" style="width: 100%" mode="widthFix"></image>
            <textarea
                v-if="contentString"
                class="contentText"
                style="height: 20px; text-align: center"
                :value="contentString"
                maxlength="-1"
                :disabled="true"
                :fixed="true"
            ></textarea>
        </view>

        <image class="imageClose" v-if="showClose == 1" src="/static/wxz_wzbagent/resource/images/notice/close.png" @tap="closePopup"></image>
    </view>
</template>

<script>
export default {
    data() {
        return {
            visibleClone: false
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        //是否弹出显示
        visible: {
            type: String,
            default: 0
        },
        //展示的标题
        titleString: {
            type: String,
            default: ''
        },
        showClose: {
            type: Number,
            default: 1
        },
        //展示的内容
        contentString: {
            type: String,
            default: ''
        },
        contentImage: {
            type: String,
            default: ''
        },
        //内容的最大高度，超出高度可滚动。
        contentHeight: {
            type: Number,
            default: 700
        },
        //点击外部的遮罩层是否允许关闭
        outClickCanClose: {
            type: Boolean,
            default: false
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        closePopup() {
            this.setData({
                visibleClone: false
            });
            this.$emit('close', {
                detail: {
                    visible: this.visible
                }
            });
        },
        outClick() {
            if (this.outClickCanClose) {
                this.$emit('close', {
                    detail: {
                        visible: this.visible
                    }
                });
            }
        },
        openImage(e) {
            var src = e.target.dataset.src;
            uni.previewImage({
                current: src,
                urls: [src]
            });
        }
    },
    watch: {
        visible: {
            handler: function (newVal, oldVal) {
                this.visibleClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './popupwindow.css';
</style>
